<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
]);

export default {
  components: {
    VChart
  },
  props: {
    title: String,
    data: Array,
    type: {
      type: String,
      default: 'line'
    },
    color: {
      type: String,
      default: '#007cc3'
    },
    yAxisName: String,
    showSplit: Boolean
  },
  computed: {
    option() {
      return {
        title: {
          text: this.title,
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            let result = `${params[0].name}<br/>`;
            params.forEach(param => {
              result += `${param.seriesName}: ${param.value}${this.yAxisName ? ' ' + this.yAxisName : ''}<br/>`;
            });
            return result;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.data.map((_, index) => `第${index + 1}公里`),
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: this.yAxisName,
          nameTextStyle: {
            padding: [0, 0, 0, 40]
          },
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: this.title,
            type: this.type,
            data: this.data,
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              color: this.color
            },
            lineStyle: {
              width: 3
            },
            areaStyle: this.type === 'line' ? {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: this.color + '80'
                }, {
                  offset: 1, color: this.color + '10'
                }]
              }
            } : null
          }
        ]
      };
    }
  }
};
</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>